<template>
	<!-- 知识竞赛 -->
	<view class="knowledge-view" :style="`min-height: ${windowHeight}px`">
		<view class="header-btn" @click="handleActivityRules">
			<view class="text">活动规则</view>
			<up-icon name="arrow-right" color="#ffffff" size="14"></up-icon>
		</view>
		<view class="centent-view">
			<view v-for="(item, index) in questionData.activityContestQuestionVOList" :key="index">
				<view class="item-view" v-if="currentIndex == index">
					<view class="sort-view" style="">
						<span style="font-size: 38rpx;">{{index+1}}</span>/{{questionData.activityContestQuestionVOList.length}} 
						{{questionTypeData[item.questionType]}}
					</view>
					<view class="question-title">{{item.questionTitle}}</view>
					<view class="option-view" v-if="item.questionType == 0">
						<up-radio-group v-model="item.userAnswerQuestion" activeColor="#F60303" :disabled="isAnswer||options.detail">
							<view v-for="(quest, i) in item.activityContestQuestionOptionList" :key="quest.id" style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
								<up-radio 
								 :name="quest.id"
								 :label="`${indexToABC(i)}、${quest.optionTitle}`"></up-radio>
							<!-- 	 <view v-if="quest.whetherCorrectAnswer== 1 && item.userAnswerQuestion">
									 <up-icon name="checkbox-mark" color="#14B709" size="22"></up-icon>
								 </view> -->
							</view>
						</up-radio-group>
					</view>
					<view class="option-view" v-if="item.questionType == 1">
						<up-checkbox-group
							v-model="item.userAnswerQuestion"
							placement="column"
							activeColor="#F60303"
							:disabled="isAnswer||options.detail"
						>
							<up-checkbox
								:customStyle="{marginBottom: '8px'}"
								v-for="(quest, i) in item.activityContestQuestionOptionList"
								:key="i"
								:label="`${indexToABC(i)}、${quest.optionTitle}`"
								:name="quest.id"
							>
							</up-checkbox>
						</up-checkbox-group>
					</view>
					<!-- userAnswerJudgment -->
					<view class="option-view" v-if="item.questionType == 2">
						<up-radio-group v-model="item.userAnswerJudgment" activeColor="#F60303" :disabled="isAnswer||options.detail">
							<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
								<up-radio :name="1" label="对"></up-radio>
							</view>
							<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
								<up-radio :name="0" label="错"></up-radio>
							</view>
						</up-radio-group>
					</view>
					<!-- 显示正确答案 v-if="whetherCorrectAnswer"-->
				<!-- 	<view style="color: #D81E06;margin-top: 30rpx;" v-if="isAnswer||options.detail">正确答案：
						<text v-for="(an, anIndex) in item.answer" :key="anIndex">{{an}}</text>
					</view> -->
					
					<view class="btn-view" v-if="questionData.activityContestQuestionVOList">
						<view class="btn" v-if="currentIndex == questionData.activityContestQuestionVOList.length-1" @tap="validSubmit(item, 1)">
							{{!options.detail?'提交':'返回'}}
						</view>
						<view class="btn" v-else @click="validSubmit(item, 0)">下一题</view>
					</view>
					<view v-else>
						<up-empty mode="data" ></up-empty>
					</view>
					
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	import { activityApi } from '@/api/activity/activity-app.js';
	export default {
		data() {
			return {
				bg: 'https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E7%AB%9E%E8%B5%9B%E7%AD%94%E9%A2%98%E9%A1%B5%E9%9D%A2/u7.png',
				questionData: {},
				userAnswerQuestionBankList: [],
				userAnswerQuestion: '',
				windowHeight: 0,
				knowledgeId: '',
				walkFeatureId: '',
				briskWalkId: '',
				whetherRandom: 0,
				currentIndex: 0, // currentIndex == null || 
				questionTypeData: ['单选题', '多选题', '判断题'],
				whetherShowAnswer: null, // 答错后是否显示正确答案,0 不显示，1显示
				isAnswer: false,
				options: {}
			}
		},
		onLoad(options) { // whetherShowAnswer
			console.log(options) // 查看详情
			this.options = options
			if (options.detail) {
				this.getQuestionDetail(options.walkFeatureId)
			} else {
				if (options.id) {
					if (options.type) { // 单独的竞赛答题
						this.knowledgeId = options.id
						this.getDetail2(options.id)
					} else {
						this.briskWalkId = options.briskWalkId || null
						this.walkFeatureId = options.walkFeatureId || null
						this.whetherRandom = options.whetherRandom
						if (this.whetherRandom=='1') { // 每日答题
							this.getDetail1(options.id)
						} else {
							this.getDetail2(options.id)
						}
					}
					
					
				} else { // 竞赛地图里面的答题
					this.whetherShowAnswer = options.whetherShowAnswer
					let dataStr = decodeURIComponent(options.data);
					let data = JSON.parse(dataStr);
				
					// console.log(data)
					if (data.activityContestQuestionVOList !== null) {
						data.activityContestQuestionVOList.forEach(item => {
							item.answer = []
							if (item.questionType !== 2) { // 单选或多选
								if (item.activityContestQuestionOptionList) {
									item.activityContestQuestionOptionList.forEach((dict, dictIndex) => {
										dict.whetherSelected = 0
										if (dict.whetherCorrectAnswer == 1) {
											item.answer.push(this.indexToABC(dictIndex))
										}
										
									})
								} else {
									item.activityContestQuestionOptionList = []
								}
								item.userAnswerQuestion = ''
							} else { // 判断题 // questionType: 2 判断题 whetherCorrect
								item.userAnswerJudgment = null
								// 0 错，1对
								item.answer.push(item.whetherCorrect==1?'对':'错')
							}
							
						})
					}
					this.questionData = data
				}
			}
			
			
			this.getsize()
		},
		methods: {
			// 健步走里面的知识竞赛
			async getDetail1(id){ // whetherRandom 是否随机
				const result = await activityApi.getEverydayQuestion(this.walkFeatureId)
			
				const questionData = {
					activityContestQuestionVOList: []
				}
				questionData.activityContestQuestionVOList = result.data
				// if (this.whetherRandom=='1') {
				// 	const result = await activityApi.getEverydayQuestion(this.walkFeatureId)
				// 	questionData.activityContestQuestionVOList = result.data
				// } else {
				// 	await activityApi.getCompetitionDetail(id)
				// 	questionData = result.data
				// }
				if (questionData.activityContestQuestionVOList !== null) {
					questionData.activityContestQuestionVOList.forEach(item => {
						item.answer = []
						if (item.questionType !== 2) { // 单选或多选
							if (item.activityContestQuestionOptionList) {
								item.activityContestQuestionOptionList.forEach((dict, dictIndex) => {
									dict.whetherSelected = 0
									if (dict.whetherCorrectAnswer == 1) {
										item.answer.push(this.indexToABC(dictIndex))
									}
								})
							} else {
								item.activityContestQuestionOptionList = []
							}
							item.userAnswerQuestion = ''
						} else { // 判断题
							item.userAnswerJudgment = null
							item.answer.push(item.whetherCorrect==1?'对':'错')
						}
						
						
					})
				}
				this.questionData = questionData //result.data;
			},
			async getDetail2(id){ // 单独的知识竞赛
				const result = await activityApi.getCompetitionDetail(id);
		
				if (result.data.activityContestQuestionVOList !== null) {
					result.data.activityContestQuestionVOList.forEach(item => {
						item.answer = []
						if (item.questionType !== 2) { // 单选或多选
							if (item.activityContestQuestionOptionList) {
								item.activityContestQuestionOptionList.forEach((dict, dictIndex) => {
									dict.whetherSelected = 0
									if (dict.whetherCorrectAnswer == 1) {
										item.answer.push(this.indexToABC(dictIndex))
									}
								})
							} else {
								item.activityContestQuestionOptionList = []
							}
							item.userAnswerQuestion = ''
						} else { // 判断题
							item.userAnswerJudgment = null
							item.answer.push(item.whetherCorrect==1?'对':'错')
						}
						
						
					})
				}
				this.questionData = result.data //result.data;
			},
			async getQuestionDetail(walkFeatureId) {
				const result = await activityApi.getEverydayQuestionDetail(walkFeatureId)
			
				result.data.forEach(item => {
					item.answer = []
					if (item.questionType == 0) { // 单选
						item.userAnswerQuestion = ''
						if (item.activityContestQuestionOptionList) {
							item.activityContestQuestionOptionList.forEach((dict, dictIndex) => {
								
								if (dict.whetherSelected = 1) {
									item.userAnswerQuestion = dict.id
								}
								
								if (dict.whetherCorrectAnswer == 1) {
									item.answer.push(this.indexToABC(dictIndex))
								}
							})
						} else {
							item.activityContestQuestionOptionList = []
						}
						
					} else if (item.questionType == 1) { // 多选
						item.userAnswerQuestion = []
						if (item.activityContestQuestionOptionList) {
							item.activityContestQuestionOptionList.forEach((dict, dictIndex) => {
								if (dict.whetherSelected = 1) {
									item.userAnswerQuestion.push(dict.id)
								}
								if (dict.whetherCorrectAnswer == 1) {
									item.answer.push(this.indexToABC(dictIndex))
								}
							})
						}
					} else { // 判断题
						item.answer.push(item.whetherCorrect==1?'对':'错')
					}
					
					
				})
				// console.log(result.data)
				this.questionData.activityContestQuestionVOList = result.data
			},
			handleActivityRules() {
				let id = this.options.id
				uni.navigateTo({
					url: `/brisk-walking/activityRules?id=${id}&type=3`
				})
			},
			getsize(){
			  let that = this
			  uni.getSystemInfo({
				success(res) {
				  that.windowHeight = res.windowHeight
				},
			  })
			},
			indexToABC(num) {
				num = num+1
				let stringName  = ''
				if(num >= 1 && num <= 26) {
					stringName = String.fromCharCode(64 + parseInt(num));
				} else {
					while(num > 26) {
						let count = parseInt(num/26);
						let remainder = num%26;
					if(remainder == 0) {
						remainder = 26;
						count--;
						stringName = String.fromCharCode(64 + parseInt(remainder)) + stringName;
					} else {
						stringName = String.fromCharCode(64 + parseInt(remainder)) + stringName;
					}
						num = count;
					}
					stringName = String.fromCharCode(64 + parseInt(num)) + stringName;
				}
				return stringName
			},
			validSubmit(item, type) {
				// currentIndex == questionData.activityContestQuestionVOList
				if (this.options.detail) {
					if (type == 0) {
						this.currentIndex ++
					} else {
						uni.navigateBack({
							delta: 1
						})
					}
					return false
				}
				if (item.questionType == 2) {
					if (item.userAnswerJudgment!==null) {
						if (type == 0) {
							this.next()
						} else {
							this.submit()
						}
						
					} else {
						uni.showToast({
						  title: '请答题！',
						  icon: 'none',
						});
					}
				} else {
					if (item.userAnswerQuestion) {
						if (type == 0) {
							this.next()
						} else {
							this.submit()
						}
					} else {
						uni.showToast({
						  title: '请答题！',
						  icon: 'none',
						});
					}
				}
				
				
			},
			next() {
				// if (this.whetherShowAnswer == '1') {
					this.isAnswer = true
					// setTimeout(() => {
						this.isAnswer = false
						this.currentIndex ++
					// }, 2000)
				// } else {
				// 	this.currentIndex ++
				// }
			},
			submit() {
				
				// this.isAnswer = this.whetherShowAnswer == '1'?true:false
				
				const data = JSON.parse(JSON.stringify(this.questionData.activityContestQuestionVOList))
				data.forEach(item => {
					if (item.questionType == 0) { // 单选题
						item.activityContestQuestionOptionList.forEach(dict => {
							if (dict.id == item.userAnswerQuestion) {
								dict.whetherSelected = 1
								delete item.userAnswerQuestion
							}
						})
					} else if(item.questionType == 1) { // 多选题 userAnswerQuestion
						if (item.userAnswerQuestion) {
							item.userAnswerQuestion.forEach(answer => {
								item.activityContestQuestionOptionList.forEach(dict => {
									if (dict.id == answer) {
										dict.whetherSelected = 1
									}
								})
							})
						}
						delete item.userAnswerQuestion
						
					} else { // 判断题
						delete item.userAnswerQuestion
					}
					delete item.answer
				})
				
				// console.log(data)
				this.isAnswer = true
				setTimeout(() => {
					this.isAnswer = false
					if (this.options.type) {
						this.submitQuestion(data)
					} else {
						this.submitJBZ(data)
					}
				}, 2000)
				
				
			},
			// 健步走里面的答题
			async submitJBZ(data) {
				let params = {
				  "briskWalkId": this.briskWalkId?this.briskWalkId:this.questionData.walkActivityId,
				  "briskWalkSiteId": this.walkFeatureId?null:this.questionData.id,
				  "userAnswerQuestionBankList": data,
				  "walkFeatureId": this.walkFeatureId,
				}
				// 竞赛地图里面的答题和单独的知识竞赛不需要加 walkFeatureId
				// 健步走里面的自定义的知识竞赛要提添加 walkFeatureId
				// if (this.walkFeatureId) {
				// 	params.walkFeatureId = this.walkFeatureId
				// }
				const result = await activityApi.getAnswerList(params);
				let that = this
				if (result.code == 0) {
					if (result.data) {
						uni.showModal({
						  title: '提示',
						  content: `恭喜您获取了${result.data}个积分`,
						  confirmText: '查看答案',
						  success: function(res) {
							  if (res.confirm) {
								  // 查看答案
								  uni.navigateTo({
								  	url: `/brisk-walking/components/answer-details?walkFeatureId=${that.walkFeatureId}`
								  });
							  } else if (res.cancel) {
								  uni.navigateBack({
								  	delta: 1
								  })
							  }
							  
							
						  }
						})
					} else {
						uni.showToast({
						  title: '提交成功',
						  icon: 'none',
						});
						setTimeout(() => {
						  uni.navigateBack({
							delta: 1
						  })
						}, 1000)
					}
					
					
					
				
				}
			},
			// 单独的知识竞赛答题
			async submitQuestion(data) {
				const params = {
					knowledgeId: this.knowledgeId,
					// walkFeatureId: this.walkFeatureId,
					userAnswerQuestionBankList: data
				}
				const result = await activityApi.questionCommit(params);
				
				if (result.code == 0) {
					uni.showToast({
					  title: '提交成功',
					  icon: 'none',
					});
					
					setTimeout(() => {
					  uni.navigateBack({
						delta: 1
					  })
					}, 500)
				
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.knowledge-view {
		// background-image: url('https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E7%AB%9E%E8%B5%9B%E7%AD%94%E9%A2%98%E9%A1%B5%E9%9D%A2/u7.png');
		// background-repeat: no-repeat;
		// background-size: 100% 100%;
		padding: 100rpx 30rpx;
		background-color: #d81e06;
		.header-btn {
			position: absolute;
			top: 20rpx;
			right: 0;
			width: 176rpx;
			height: 54rpx;
			font-weight: 500;
			text-align: center;
			line-height: 54rpx;
			background: rgba(0, 0, 0, 0.2);
			color: #ffffff;
			font-size: 28rpx;
			border-top-left-radius: 46rpx;
			border-bottom-left-radius: 46rpx;
			display: flex;
			justify-content: center;
			.text {
				margin-right: 10rpx
			}
		}
		.centent-view {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx 30rpx 120rpx 30rpx;
			min-height: 84vh;
			position: relative;
			.item-view {
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 30rpx;
				.sort-view {
					color: #9A9A9A;
					margin-bottom: 20rpx;
				}
				.question-title {
					// font-size: 30rpx;
					margin-bottom: 10rpx;
				}
				.option-view {
					line-height: 60rpx;
				}
			}
			.btn-view {
				position: absolute;
				bottom: 30rpx;
				left: 0;
				right: 0;
				display: flex;
				justify-content: center;
				.btn {
					width: 416rpx;
					height: 80rpx;
					font-size: 26rpx;
					color: #fff;
					text-align: center;
					line-height: 80rpx;
					background-color: #F60303;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>